<template>
	<!-- 返修单详情 -->
	<div style="max-height: 70vh; overflow-y: scroll; padding-right: 10px">
		<el-form ref="formOpen" :model="formOpen" class="add-form2" label-width="95px" disabled>
			<el-form-item label="返修任务单" prop="repairNumber">
				<el-input v-model="formOpen.repairNumber" />
			</el-form-item>
			<el-form-item label="合同号" prop="contractNumber">
				<el-input v-model="formOpen.contractNumber" />
			</el-form-item>
			<el-form-item label="客户名称" prop="clientId">
				<el-select v-model="formOpen.clientId">
					<el-option v-for="item in clientDatas" :key="item.id" :value="item.id" :label="item.clientName"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="客户代表" prop="productRepresentativeName">
				<el-input disabled v-model="formOpen.productRepresentativeName" />
			</el-form-item>
			<el-form-item label="监管协议号" prop="protocolId">
				<el-select v-model="formOpen.protocolId">
					<el-option v-for="item in tclientProtocol" :key="item.id" :label="item.protocolNumber" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="3B号" prop="bNumber">
				<el-input v-model="formOpen.bNumber" />
			</el-form-item>
			<el-form-item label="接收时间" prop="receptionTime">
				<el-date-picker clearable v-model="formOpen.receptionTime"> </el-date-picker>
			</el-form-item>
			<el-form-item label="故障原因" prop="failureCause" style="width: 100%">
				<el-input v-model="formOpen.failureCause" type="textarea" />
			</el-form-item>
			<div style="width: 100%">
				<el-divider content-position="center">返修单产品</el-divider>
				<el-table :data="repairProductList" border>
					<el-table-column label="序号" align="center" type="index" width="55" />
					<el-table-column label="产品名称" prop="productName" min-width="120" :show-overflow-tooltip="true" />
					<el-table-column label="产品型号" prop="productModel" min-width="120" :show-overflow-tooltip="true" />
					<el-table-column label="产品编号" align="center" prop="productNumber" min-width="120" :show-overflow-tooltip="true" />
					<el-table-column label="产品接收时间" align="center" prop="receiptTime" width="120" :show-overflow-tooltip="true" />
					<el-table-column label="产品数量" align="center" prop="productQuantity" min-width="70" :show-overflow-tooltip="true" />
					<el-table-column label="故障模式" align="center" prop="failureMode" min-width="150" :show-overflow-tooltip="true" />
				</el-table>
				<pagination menuNames="Pagination8" v-show="producttotal > 0" :total="producttotal" :page.sync="queryProduct.pageNum" :limit.sync="queryProduct.pageSize" @pagination="getlistRepairProduct" />
			</div>
		</el-form>
	</div>
</template>
<script>
import { getRepair } from "@/api/repair/repair"
import { clientList, getcolumn } from "@/api/selectList"
import { listRepairProduct } from "@/api/repair/repairProduct"
import { getClient } from "@/api/system/custom"

export default {
	name: "RepairInfo",
	props: {},
	data() {
		return {
			repairIds: "",
			formOpen: {},
			clientDatas: [],
			tclientProtocol: [],
			repairProductList: [],
			producttotal: 0,
			queryProduct: { pageNum: 1, pageSize: 10 }
		}
	},
	created() {
		this.getSize()
	},
	methods: {
		getSize() {
			getcolumn({ pageName: "Pagination8" }).then(response => {
				this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
				this.getclientList()
			})
		},
		// 重置表单
		resetFormData(id) {
			this.formOpen = {
				id: undefined,
				scheduleNumber: undefined,
				scheduleName: undefined
			}
			this.repairIds = id
			this.resetForm("formOpen")
			this.getrepairDetail(id)
			this.getlistRepairProduct(id)
		},
		// 产品列表
		getlistRepairProduct(id) {
			this.productloading = true
			this.queryProduct.repairId = this.repairIds
			listRepairProduct(this.queryProduct).then(response => {
				this.repairProductList = response.rows
				this.producttotal = response.total
				this.productloading = false
			})
		},
		// 用户列表
		getclientList() {
			clientList({
				clientState: "1"
			}).then(res => {
				this.clientDatas = res.rows
			})
		},
		// 返修详情
		getrepairDetail(id) {
			getRepair(id).then(response => {
				this.formOpen = response.data
				this.getclientList()
				this.getClientData(this.formOpen.clientId)
				this.openDetail = true
			})
		},
		// 客户数据
		getClientData(e) {
			getClient(e).then(response => {
				if (response.data.tclientProtocolList && response.data.tclientProtocolList.length > 0) {
					this.tclientProtocol = response.data.tclientProtocolList.filter(item => item.state == "1")
					if (this.tclientProtocol.length == 1) {
						this.formOpen.protocolId = this.tclientProtocol[0].id
						this.formOpen.protocolNumber = this.tclientProtocol[0].protocolNumber
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>
